import React, { useMemo, useState } from 'react'
import './index.css'
export type TodoListType = {
  id: number;
  isDone: boolean;
  title: string;
}
type PropsType = {
  todolist:TodoListType[]
  handleDeleteTodoList:(id:number)=>void
  handleCheckedIsDoneById:(id:number)=>void
}
export default function Main(props:PropsType) {
  const list = props.todolist
  const handleDelTodoList = (id:number) => { 
    props.handleDeleteTodoList(id)
   }
   const handleCheckedId = (id:number) => { 
     props.handleCheckedIsDoneById(id)
    }
  return (
    <div className='main'>
      <ul>
        {
         list.map(item => <li key={item.id}>
            <input type="checkbox" className='inpcheckbox' checked={item.isDone} onChange={()=>handleCheckedId(item.id)}/>
            {/* active 添加active表示代办已完成 */}
            {/* <span className='inptext'>{item.title}</span> */}
            <span className={item.isDone?['inptext','active'].join(' ') : 'inptext'}>{item.title}</span>
            <span className='del' onClick={()=>handleDelTodoList(item.id)}>X</span>
          </li>)
        }
      </ul>
    </div>
  )
}
